<template>
	<view class="fireFacilities">
		<view class="fireFacilities-box ff-padding-bottom-60 ff-font-14">
			<view v-if="buildDeatils.length > 0">
				<view class="ff-bg-fff ff-padding-10 ff-margin-bottom-10 ff-border-radius-10"
					v-for="(item, index) of buildDeatils" :key="index">
					<!-- 标题栏 -->
					<view class="ff-bg-F2F6FF ff-border-radius-8 ff-flex-between ff-align-items-one"
						@click="cuIconClick(index)">
						<view class="title ff-font-15 ff-color-000 ff-font-weight-600 ff-ellipsis-1"
							:class="{ active: !item.showCount }">{{ item.facilitiesTypeName }}</view>
						<view class="ff-flex">
							<view class="ff-color-red ff-font-14"
								@click.stop="deleteSelectClick(index, item.facilitiesTypeId)">删除</view>
							<view class="ff-margin-left-30">
								<view v-if="item.showCount" class="ff-color-666X"><u-icon name="arrow-down"
										size="36"></u-icon></view>
								<view v-else :class="{ active: !item.showCount }"><u-icon name="arrow-up"
										size="36"></u-icon></view>
							</view>
						</view>
					</view>
					<!-- 连接的内容一栏 -->
					<view class="ff-padding-left-10 ff-padding-right-10" v-if="!item.showCount">
						<view
							class="ff-flex-between ff-align-items-one ff-solid-bottom ff-padding-top-15 ff-padding-bottom-15 ff-font-14"
							v-for="(itemSon, ind) of item.items" :key="ind">
							<view class="titles">{{ itemSon.facilitiesItemName }}</view>
							<input type="number" class="ff-text-right inpWidth" v-model.trim="itemSon.number"
								placeholder="请输入数量" />
						</view>
					</view>
				</view>
			</view>
			<f-noData v-else></f-noData>
		</view>
		<view class="fireFacilities-submitBut ff-flex">
			<view class="fireFacilities-submitBut-add animate__animated animate__bounceInLeft"><u-button
					@click="addFacilities" type="primary" plain>新增消防设施</u-button></view>
			<view class="fireFacilities-submitBut-save animate__animated animate__bounceInRight"><u-button
					@click="saveFacilities" type="primary">保存</u-button></view>
		</view>
		<!-- 组件类 -->
		<u-select v-model="facilitiesState" mode="single-column" :default-value.sync="defaultVal" :list="facilitiesList"
			:safe-area-inset-bottom="true" label-name="facilitiesTypeName" value-name="id" title="消防设施"
			@confirm="facilitiesConfirm"></u-select>
		<u-toast ref="uToast" />
		<u-modal v-model="deleteModal" content="确定删除此消防设施吗？" title="温馨提示" @confirm="deleteConfirm"
			:show-cancel-button="true" :content-style="{ 'line-height': '1.5' }" />
		<f-loading ref="loading" />
		<u-back-top :scrollTop="scrollTop" top="200" mode="circle" :iconStyle="iconStyle"
			:customStyle="customstyle"></u-back-top>
	</view>
</template>

<script>
	export default {
		name: 'fireFacilities',
		data() {
			return {
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
					color: '#FFFFFF'
				},
				customstyle: {
					background: '#3B83FE'
				},
				defaultVal: [0], // 消防设施设备单选框默认选中
				deleteModal: false, // 删除弹框显/隐
				deleteIdx: '', // 要删除的index
				facilitiesState: false, // 新增消防设施的弹窗
				facilitiesId: '', // 消防设施的总ID
				facilitiesList: [], // 消防设施设备列表
				facilitiesSubitemList: [], // 消防设施设备子项列表
				buildDeatils: [], // 历史消防设施列表
				idList: [], // id集合
				idDelectSelect: '', // 删除时选中的ID
				noData: false // 没有数据显/隐
			};
		},
		onLoad(e) {
			this.facilitiesId = e.id;
			this.getbuildDeatilsInfo(e.id); // 获取消防设施数据
			this.getFacilitiesList(); // 获取设备数据
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 获取设备设施数据
			async getFacilitiesList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/project/queryFacilitiesType'
				});
				// console.log('获取设施设备数据-------', data);
				if (data.code === 200) {
					this.facilitiesList = data.data;
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 获取消防设施数据
			async getbuildDeatilsInfo(facilitiesId) {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: `/company/building/${facilitiesId}/facilities/all`
				});
				// console.log('获取历史的消防设施列表-----', data);
				if (data.code === 200) {
					if (data.data.length > 0) {
						this.noData = false;
						let datas = [];
						data.data.map(item => {
							this.idList.push(item.facilitiesTypeId);
							datas.push(Object.assign({}, item, {
								showCount: true
							}));
						});
						this.buildDeatils = datas;
					} else {
						this.noData = true;
					}
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 点击展开和收起消防设施
			cuIconClick(idx) {
				this.buildDeatils[idx].showCount = !this.buildDeatils[idx].showCount;
			},
			// 点击新增消防设施
			addFacilities() {
				this.facilitiesState = true;
			},
			// 点击确认选择的当前的消防设施
			facilitiesConfirm(e) {
				let selectVal = e[0];
				if (this.idList.includes(selectVal.value)) {
					// 包含
					this.$refs.uToast.show({
						title: '请勿重复添加',
						type: 'error'
					});
				} else {
					this.idList.push(selectVal.value);
					this.facilitiesList.filter(item => {
						if (item.id === selectVal.value) {
							this.facilitiesSubitemList = item.items;
						}
					});
					let subitem = []; // 新建子项空数组
					this.facilitiesSubitemList.forEach(items => {
						subitem.push({
							facilitiesItemId: +items.id,
							facilitiesItemName: items.facilitiesItemName,
							number: ''
						});
					});
					// 添加到历史的消防设施设备中
					this.buildDeatils.push({
						showCount: false, // 是否展开列 false（展开） / true（关闭）
						buildingId: this.facilitiesId,
						facilitiesTypeId: +selectVal.value,
						facilitiesTypeName: selectVal.label,
						items: subitem
					});
				}
				this.defaultVal = [this.facilitiesList.findIndex(item => item.id === e[0].value)] || [
					0
				] // 解决select默认值不重置问题
				this.$forceUpdate(); // 数据进行强制刷新渲染
			},
			// 删除选中的消防设施设备-------------第一步
			deleteSelectClick(idx, delectIdx) {
				this.deleteIdx = idx;
				this.idDelectSelect = delectIdx;
				if (this.buildDeatils.length > 1) {
					this.deleteModal = true;
				} else {
					this.$refs.uToast.show({
						title: '消防设施不可全部删除',
						type: 'error'
					});
				}
			},
			// 删除选中的消防设施设备-------------第二步
			deleteConfirm() {
				this.buildDeatils.splice(this.deleteIdx, 1);
				this.idList.splice(this.idList.findIndex(item => item === this.idDelectSelect), 1);
				this.$refs.uToast.show({
					title: '删除成功！',
					type: 'success'
				});
			},
			// 保存消防设施设备
			saveFacilities() {
				if (this.buildDeatils.length > 0) {
					this.$refs.loading.openLoading('保存中···'); // 打开loading动画
					let facilitiesParams = [];
					this.buildDeatils.forEach(res => {
						let {
							showCount,
							...params
						} = res;
						facilitiesParams.push(params);
					});
					this.$http
						.post({
							url: '/company/building/facilities/upd',
							data: facilitiesParams
						})
						.then(res => {
							// console.log('保存消防设施设备返回的结果数据----', res);
							this.$refs.loading.closeLoading(); // 关闭loading动画
							if (res.code === 200) {
								this.$refs.uToast.show({
									title: '保存成功！',
									type: 'success'
								});
								let that = this;
								setTimeout(() => {
									that.$pageJump.reLaunch(
										'/pages/maintenance/public/personal/building/buildingList'
									);
								}, 500);
							} else if (res.code === 5001) {
								this.$refs.uToast.show({
									title: '消防设施设备数量，不允许输入小数（仅限正整数）',
									type: 'error'
								});
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						});
				} else {
					this.$refs.uToast.show({
						title: '请添加消防设施',
						type: 'error'
					});
				}
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.fireFacilities {
		.active {
			color: #3178ff;
		}

		&-box {
			margin: 20rpx 24rpx;

			.ff-bg-F2F6FF {
				background-color: #f2f6ff;
				padding: 30rpx 20rpx;

				.title {
					width: 70%;
				}
			}
		}

		.titles {
			width: 900rpx;
		}

		.inpWidth {
			width: 390rpx;
		}

		&-submitBut {
			padding-bottom: env(safe-area-inset-bottom); // 针对iphone xr等系列的刘海底部屏幕做的适配
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 33;
			width: 100%;
			background-color: #ffffff;

			&-add {
				width: 50%;

				/deep/.u-btn--primary--plain {
					background-color: #ffffff !important;
				}
			}

			&-save {
				width: 50%;
			}
		}
	}
</style>